<template>
  <m-page-wrapper>
    <m-crud ref="crudRef" :option="option">
    </m-crud>
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CrudType } from '/@/components/Crud/types';
const crudRef = ref()
const option = ref<CrudType>({
  // 弹窗类型
  // dialogType: 'drawer',
  // 弹窗属性
  dialogProps: {
    width: '60%'
  },
  // 表单属性
  formProps: {
    labelWidth: '100px',
    // labelCol: { flex: '100px' },
  },
  // 标题
  title: '配置',
  // 列表接口
  api: '/sys/config/page',
  // 添加保存接口
  saveApi: '/sys/config/save',
  // 添加保存接口
  updateApi: '/sys/config/update',
  // 删除接口
  delApi: '/sys/config/remove',
  // 添加的权限码
  addPerms: 'sys:config:save',
  // 修改的权限码
  editPerms: 'sys:config:update',
  // 查看的权限码
  viewPerms: 'sys:config:detail',
  // 删除的权限码
  delPerms: 'sys:config:remove',
  columns: [
    {
      title: '配置ID',
      dataIndex: 'id',
      key: 'id',
      list: false,
      view: false,
      add: false,
      edit: true,
      component: 'Input',
      componentProps: {
        type: "hidden",
        maxlength: 20,
      },
      rules: [{ required: false, message: '请输入配置ID', trigger: 'blur' }]
    },
    {
      title: '配置名称',
      dataIndex: 'name',
      key: 'name',
      search: true,
      searchType: "EQ",
      searchSpan: 12,
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入配置名称', trigger: 'blur' }]
    },
    {
      title: '唯一编码',
      dataIndex: 'code',
      key: 'code',
      search: true,
      searchSpan: 12,
      searchType: "EQ",
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }]
    },
    {
      title: '分组编码',
      dataIndex: 'groupCode',
      key: 'groupCode',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入分组编码', trigger: 'blur' }]
    },
    {
      title: '是否系统',
      dataIndex: 'isSys',
      key: 'isSys',
      list: true,
      view: true,
      add: true,
      edit: true,
      defaultValue: 1,
      component: 'Dict',
      componentProps: {
        code: "yes_no",
        renderType: "RadioGroup",
      },
      rules: [{ required: true, message: '请输入是否系统', trigger: 'blur' }]
    },
    {
      title: '是否启用',
      dataIndex: 'enabled',
      key: 'enabled',
      list: true,
      view: true,
      add: true,
      edit: true,
      defaultValue: 1,
      component: 'Dict',
      componentProps: {
        code: "yes_no",
        renderType: "RadioGroup",
      },
      rules: [{ required: true, message: '请输入是否启用', trigger: 'blur' }]
    },
    {
      title: '配置内容',
      dataIndex: 'content',
      key: 'content',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'TextArea',
      componentProps: {
        maxlength: 5000,
        showCount: true,
        rows: 3,
      },
      rules: [{ required: true, message: '请输入配置内容', trigger: 'blur' }]
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'TextArea',
      componentProps: {
        maxlength: 2000,
        showCount: true,
        rows: 3,
      },
      rules: [{ required: false, message: '请输入备注', trigger: 'blur' }]
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'DatePicker',
      componentProps: {
        valueFormat: "YYYY-MM-DD",
        mode: "date",
        format: "YYYY-MM-DD",
      },
      rules: [{ required: false, message: '请输入创建时间', trigger: 'blur' }]
    },
    {
      title: '创建用户',
      dataIndex: 'createUser',
      key: 'createUser',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'Input',
      componentProps: {
        type: "text",
      },
      rules: [{ required: false, message: '请输入创建用户', trigger: 'blur' }]
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'DatePicker',
      componentProps: {
        valueFormat: "YYYY-MM-DD",
        mode: "date",
        format: "YYYY-MM-DD",
      },
      rules: [{ required: false, message: '请输入更新时间', trigger: 'blur' }]
    },
    {
      title: '更新用户',
      dataIndex: 'updateUser',
      key: 'updateUser',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'Input',
      componentProps: {
        type: "text",
      },
      rules: [{ required: false, message: '请输入更新用户', trigger: 'blur' }]
    },
    {
      title: '是否删除',
      dataIndex: 'isDeleted',
      key: 'isDeleted',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'Input',
      componentProps: {
        type: "text",
      },
      rules: [{ required: false, message: '请输入是否删除', trigger: 'blur' }]
    },]
    ,
})
</script>
<style lang="less" scoped>

</style>